<template>
  <view class="content">
    <!-- 搜索栏 -->
    <YgSearch />
    <!-- 轮播图区域 -->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true"
    >
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, index) in banners" :key="index">
        <view class="swiper-item">
          <!-- 动态绑定图片的 src 属性 -->
          <image class="img" :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>

    <!-- 分类导航遍历渲染 -->
    <view class="cate-wrap">
      <image
        class="cate-img"
        v-for="item in navList"
        :key="item.name"
        :src="item.image_src"
        @click="navClickHandler(item)"
      />
    </view>

    <!-- 楼层区域 -->
    <view class="floor-list">
      <!-- 楼层 item 项 -->
      <view class="floor-item" v-for="(item, index) in floorList" :key="index">
        <!-- 楼层标题 -->
        <image class="floor-title" :src="item.floor_title.image_src"></image>
        <!-- 楼层图片区域 -->
        <view class="floor-img-box">
          <!-- 左侧大图片的盒子 -->
          <navigator class="left-img-box" :url="item.product_list[0].url">
            <image
              :src="item.product_list[0].image_src"
              :style="{ width: item.product_list[0].image_width + 'rpx' }"
              mode="widthFix"
            ></image>
          </navigator>
          <!-- 右侧 4 个小图片的盒子 -->
          <view class="right-img-box">
            <navigator
              class="right-img-item"
              v-for="(item2, index2) in item.product_list"
              :key="index2"
              v-show="index2!==0"
            >
              <image
                :src="item2.image_src"
                mode="widthFix"
                :style="{ width: item2.image_width + 'rpx' }"
              ></image>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getBannersAPI, getNavAPI, getFloorAPI } from "@/api/home";
export default {
  data() {
    return {
      // 当前轮播图
      currentSwiper: 0,
      // 轮播图
      banners: [],
      // 分类导航的数据列表
      navList: [],
      // 楼层数据
      floorList: [],
    };
  },
  onLoad() {
    // 轮播图
    this.getBanners();
    // 分类导航
    this.getNavList();
    // 楼层列表
    this.getFloorList();
  },
  methods: {
    // 轮播图
    async getBanners() {
      console.log("页面加载");
      const { message } = await getBannersAPI();
      console.log("数据", message);
      this.banners = message;
    },
    // 分类导航
    async getNavList() {
      const { message } = await getNavAPI();
      console.log("导航", message);
      this.navList = message;
    },
    // 点击分类跳转
    navClickHandler(item) {
      // 判断点击的是哪个 nav
      if (item.name === "分类") {
        uni.switchTab({ url: "/pages/category/index" });
      }
    },
    // 定义获取楼层列表数据的方法
    async getFloorList() {
      const { message } = await getFloorAPI();
      console.log(message);

      // 通过双层 forEach 循环，处理 URL 地址
      message.forEach((floor) => {
        floor.product_list.forEach((prod) => {
          prod.url =
            "/pages/goods_list/goods_list?" + prod.navigator_url.split("?")[1];
        });
      });

      this.floorList = message;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.img {
  width: 100%;
}

.cate-wrap {
  margin: 12rpx 0;
  display: flex;
  justify-content: space-around;
  .cate-img {
    width: 128rpx;
    height: 140rpx;
  }
}

.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}

.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
</style>
